Skip to content

Commit

Permalink
update naming to anchor button
Browse files Browse the repository at this point in the history
  • Loading branch information
chrisdholt committed Apr 11, 2023
1 parent b9e14d7 commit de77904
Show file tree
Hide file tree
Showing 13 changed files with 134 additions and 133 deletions.
6 changes: 3 additions & 3 deletions packages/web-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@
"types": "./dist/esm/accordion-item/define.d.ts",
"default": "./dist/esm/accordion-item/define.js"
},
"./anchor": {
"types": "./dist/esm/anchor/define.d.ts",
"default": "./dist/esm/anchor/define.js"
"./anchor-button": {
"types": "./dist/esm/anchor-button/define.d.ts",
"default": "./dist/esm/anchor-button/define.js"
},
"./avatar": {
"types": "./dist/esm/avatar/define.d.ts",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { FluentDesignSystem } from '../fluent-design-system.js';
import { AnchorButton } from './anchor-button.js';
import { styles } from './anchor-button.styles.js';
import { template } from './anchor-button.template.js';

/**
* The Fluent Anchor Button Element. Implements {@link @microsoft/fast-foundation#Anchor },
* {@link @microsoft/fast-foundation#anchorTemplate}
*
* @public
* @remarks
* HTML Element: \<fluent-anchor-button\>
*/
export const definition = AnchorButton.compose({
name: `${FluentDesignSystem.prefix}-anchor-button`,
template,
styles,
shadowOptions: {
delegatesFocus: true,
},
});
40 changes: 40 additions & 0 deletions packages/web-components/src/anchor-button/anchor-button.options.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { AnchorOptions, ValuesOf } from '@microsoft/fast-foundation';
import { ButtonAppearance, ButtonShape, ButtonSize } from '../button/button.options.js';

/**
* Anchor Button Appearance constants
* @public
*/
export const AnchorButtonAppearance = ButtonAppearance;

/**
* An Anchor Button can be secondary, primary, outline, subtle, transparent
* @public
*/
export type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppearance>;

/**
* An Anchor Button can be square, circular or rounded.
* @public
*/
export const AnchorButtonShape = ButtonShape;

/**
* An Anchor Button can be square, circular or rounded
* @public
*/
export type AnchorButtonShape = ValuesOf<typeof AnchorButtonShape>;

/**
* An Anchor Button can be a size of small, medium or large.
* @public
*/
export const AnchorButtonSize = ButtonSize;

/**
* An Anchor Button can be on of several preset sizes.
* @public
*/
export type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;

export { AnchorOptions as AnchorButtonOptions };
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
import { html } from '@microsoft/fast-element';
import type { Args, Meta } from '@storybook/html';
import { renderComponent } from '../helpers.stories.js';
import type { Anchor as FluentAnchor } from './anchor.js';
import { AnchorAppearance, AnchorShape, AnchorSize } from './anchor.options.js';
import type { AnchorButton as FluentAnchorButton } from './anchor-button.js';
import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize } from './anchor-button.options.js';
import './define.js';

type AnchorStoryArgs = Args & FluentAnchor;
type AnchorStoryMeta = Meta<AnchorStoryArgs>;
type AnchorButtonStoryArgs = Args & FluentAnchorButton;
type AnchorButtonStoryMeta = Meta<AnchorButtonStoryArgs>;

const storyTemplate = html<AnchorStoryArgs>`
<fluent-anchor
const storyTemplate = html<AnchorButtonStoryArgs>`
<fluent-anchor-button
href="${x => x.href}"
appearance="${x => x.appearance}"
shape="${x => x.shape}"
size="${x => x.size}"
?disabled="${x => x.disabled}"
?disabled-focusable="${x => x.disabledFocusable}"
?icon-only="${x => x.iconOnly}"
?icon="${x => x.icon}"
>
${x => x.content}
</fluent-anchor>
</fluent-anchor-button>
`;

export default {
Expand All @@ -33,19 +32,19 @@ export default {
},
argTypes: {
appearance: {
options: Object.values(AnchorAppearance),
options: Object.values(AnchorButtonAppearance),
control: {
type: 'select',
},
},
shape: {
options: Object.values(AnchorShape),
options: Object.values(AnchorButtonShape),
control: {
type: 'select',
},
},
size: {
options: Object.values(AnchorSize),
options: Object.values(AnchorButtonSize),
control: {
type: 'select',
},
Expand Down Expand Up @@ -79,27 +78,27 @@ export default {
control: 'Anchor text',
},
},
} as AnchorStoryMeta;
} as AnchorButtonStoryMeta;

export const Anchor = renderComponent(storyTemplate).bind({});
export const AnchorButton = renderComponent(storyTemplate).bind({});

export const Appearance = renderComponent(html<AnchorStoryArgs>`
<fluent-anchor href="#">Default</fluent-anchor>
<fluent-anchor href="#" appearance="primary">Primary</fluent-anchor>
<fluent-anchor href="#" appearance="outline">Outline</fluent-anchor>
<fluent-anchor href="#" appearance="subtle">Subtle</fluent-anchor>
<fluent-anchor href="#" appearance="transparent">Transparent</fluent-anchor>
export const Appearance = renderComponent(html<AnchorButtonStoryArgs>`
<fluent-anchor-button href="#">Default</fluent-anchor-button>
<fluent-anchor-button href="#" appearance="primary">Primary</fluent-anchor-button>
<fluent-anchor-button href="#" appearance="outline">Outline</fluent-anchor-button>
<fluent-anchor-button href="#" appearance="subtle">Subtle</fluent-anchor-button>
<fluent-anchor-button href="#" appearance="transparent">Transparent</fluent-anchor-button>
`);

export const Shape = renderComponent(html<ButtonStoryArgs>`
<fluent-anchor href="#" shape="rounded">Rounded</fluent-anchor>
<fluent-anchor href="#" shape="circular">Circular</fluent-anchor>
<fluent-anchor href="#" shape="square">Square</fluent-anchor>
export const Shape = renderComponent(html<AnchorButtonStoryArgs>`
<fluent-anchor-button href="#" shape="rounded">Rounded</fluent-anchor-button>
<fluent-anchor-button href="#" shape="circular">Circular</fluent-anchor-button>
<fluent-anchor-button href="#" shape="square">Square</fluent-anchor-button>
`);

export const Size = renderComponent(html<ButtonStoryArgs>`
<fluent-anchor href="#" size="small">Small</fluent-anchor>
<fluent-anchor href="#" size="small" icon
export const Size = renderComponent(html<AnchorButtonStoryArgs>`
<fluent-anchor-button href="#" size="small">Small</fluent-anchor-button>
<fluent-anchor-button href="#" size="small" icon
><svg
fill="currentColor"
slot="start"
Expand All @@ -113,9 +112,9 @@ export const Size = renderComponent(html<ButtonStoryArgs>`
d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
fill="currentColor"
></path></svg
>Small with calendar icon</fluent-anchor
>Small with calendar icon</fluent-anchor-button
>
<fluent-anchor href="#" size="small" icon-only aria-label="Small icon only button"
<fluent-anchor-button href="#" size="small" icon-only aria-label="Small icon only button"
><svg
fill="currentColor"
aria-hidden="true"
Expand All @@ -128,9 +127,9 @@ export const Size = renderComponent(html<ButtonStoryArgs>`
d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
fill="currentColor"
></path></svg
></fluent-anchor>
<fluent-anchor href="#" size="medium">Medium</fluent-anchor>
<fluent-anchor href="#" size="medium" icon
></fluent-anchor-button>
<fluent-anchor-button href="#" size="medium">Medium</fluent-anchor-button>
<fluent-anchor-button href="#" size="medium" icon
><svg
fill="currentColor"
slot="start"
Expand All @@ -144,9 +143,9 @@ export const Size = renderComponent(html<ButtonStoryArgs>`
d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
fill="currentColor"
></path></svg
>Medium with calendar icon</fluent-anchor
>Medium with calendar icon</fluent-anchor-button
>
<fluent-anchor href="#" size="medium" icon-only aria-label="Medium icon only button"
<fluent-anchor-button href="#" size="medium" icon-only aria-label="Medium icon only button"
><svg
fill="currentColor"
aria-hidden="true"
Expand All @@ -159,9 +158,9 @@ export const Size = renderComponent(html<ButtonStoryArgs>`
d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
fill="currentColor"
></path></svg
></fluent-anchor>
<fluent-anchor href="#" size="large">Large</fluent-anchor>
<fluent-anchor href="#" size="large" icon
></fluent-anchor-button>
<fluent-anchor-button href="#" size="large">Large</fluent-anchor-button>
<fluent-anchor-button href="#" size="large" icon
><svg
fill="currentColor"
slot="start"
Expand All @@ -175,9 +174,9 @@ export const Size = renderComponent(html<ButtonStoryArgs>`
d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
fill="currentColor"
></path></svg
>Large with calendar icon</fluent-anchor
>Large with calendar icon</fluent-anchor-button
>
<fluent-anchor href="#" size="large" icon-only aria-label="Large icon only button"
<fluent-anchor-button href="#" size="large" icon-only aria-label="Large icon only button"
><svg
fill="currentColor"
aria-hidden="true"
Expand All @@ -190,24 +189,26 @@ export const Size = renderComponent(html<ButtonStoryArgs>`
d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
fill="currentColor"
></path></svg
></fluent-anchor>
></fluent-anchor-button>
`);

export const Disabled = renderComponent(html<ButtonStoryArgs>`
<fluent-anchor href="#">Enabled state</fluent-anchor>
<fluent-anchor href="#" disabled>Disabled state</fluent-anchor>
<fluent-anchor href="#" disabled-focusable>Disabled focusable state</fluent-anchor>
<fluent-anchor href="#" appearance="primary">Enabled state</fluent-anchor>
<fluent-anchor href="#" appearance="primary" disabled>Disabled state</fluent-anchor>
<fluent-anchor href="#" appearance="primary" disabled-focusable>Disabled focusable state</fluent-anchor>
export const Disabled = renderComponent(html<AnchorButtonStoryArgs>`
<fluent-anchor-button href="#">Enabled state</fluent-anchor-button>
<fluent-anchor-button href="#" disabled>Disabled state</fluent-anchor-button>
<fluent-anchor-button href="#" disabled-focusable>Disabled focusable state</fluent-anchor-button>
<fluent-anchor-button href="#" appearance="primary">Enabled state</fluent-anchor-button>
<fluent-anchor-button href="#" appearance="primary" disabled>Disabled state</fluent-anchor-button>
<fluent-anchor-button href="#" appearance="primary" disabled-focusable>Disabled focusable state</fluent-anchor-button>
`);

export const WithLongText = renderComponent(html<ButtonStoryArgs>`
export const WithLongText = renderComponent(html<AnchorButtonStoryArgs>`
<style>
.max-width {
width: 280px;
}
</style>
<fluent-anchor href="#">Short text</fluent-anchor>
<fluent-anchor href="#" class="max-width">Long text wraps after it hits the max width of the component</fluent-anchor>
<fluent-anchor-button href="#">Short text</fluent-anchor-button>
<fluent-anchor-button href="#" class="max-width"
>Long text wraps after it hits the max width of the component</fluent-anchor-button
>
`);
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { ElementViewTemplate } from '@microsoft/fast-element';
import { anchorTemplate } from '@microsoft/fast-foundation';
import type { Anchor } from './anchor.js';
import type { AnchorButton } from './anchor-button.js';

/**
* The template for the Button component.
* @public
*/
export const template: ElementViewTemplate<Anchor> = anchorTemplate();
export const template: ElementViewTemplate<AnchorButton> = anchorTemplate();
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
import { attr } from '@microsoft/fast-element';
import { FASTAnchor } from '@microsoft/fast-foundation';
import { AnchorAppearance, AnchorShape, AnchorSize } from './anchor.options.js';
import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize } from './anchor-button.options.js';

/**
* The base class used for constructing a fluent-anchor custom element
* The base class used for constructing a fluent-anchor-button custom element
* @public
*/
export class Anchor extends FASTAnchor {
export class AnchorButton extends FASTAnchor {
/**
* The appearance the anchor should have.
* The appearance the anchor button should have.
*
* @public
* @remarks
* HTML Attribute: appearance
*/
@attr
public appearance?: AnchorAppearance | undefined;
public appearance?: AnchorButtonAppearance | undefined;

/**
* The shape the anchor should have.
* The shape the anchor button should have.
*
* @public
* @remarks
* HTML Attribute: shape
*/
@attr
public shape?: AnchorShape | undefined;
public shape?: AnchorButtonShape | undefined;

/**
* The size the anchor should have.
* The size the anchor button should have.
*
* @public
* @remarks
* HTML Attribute: size
*/
@attr
public size?: AnchorSize;
public size?: AnchorButtonSize;

/**
* The anchor has an icon only, no text content
* The anchor button has an icon only, no text content
*
* @public
* @remarks
Expand All @@ -48,7 +48,7 @@ export class Anchor extends FASTAnchor {
public iconOnly: boolean = false;

/**
* The anchor is disabled
* The anchor button is disabled
*
* @public
* @remarks
Expand All @@ -67,7 +67,7 @@ export class Anchor extends FASTAnchor {
}

/**
* The anchor is disabled but focusable
* The anchor button is disabled but focusable
*
* @public
* @remarks
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FluentDesignSystem } from '../fluent-design-system.js';
import { definition } from './anchor.definition.js';
import { definition } from './anchor-button.definition.js';

definition.define(FluentDesignSystem.registry);
4 changes: 4 additions & 0 deletions packages/web-components/src/anchor-button/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export * from './anchor-button.js';
export * from './anchor-button.options.js';
export { template as AnchorButtonTemplate } from './anchor-button.template.js';
export { definition as AnchorButtonDefinition } from './anchor-button.definition.js';
21 changes: 0 additions & 21 deletions packages/web-components/src/anchor/anchor.definition.ts

This file was deleted.

Loading

0 comments on commit de77904

Please sign in to comment.