@ouestfrance/sipa-bms-ui 8.20.0 → 8.21.0

package/src/assets/scss/_formkit.scss

@@ -1,353 +0,0 @@
-@mixin formkit {
-  :root body {
-    /* theme name */
-    --formkit-theme: genesis;
-
-    /* typography */
-    --fk-font-family: var(--bms-font-family);
-    --fk-font-family-input: var(--fk-font-family);
-    --fk-font-family-label: var(--fk-font-family);
-    --fk-font-family-legend: var(--fk-font-family-label);
-    --fk-font-family-option: var(--fk-font-family-input);
-    --fk-font-family-help: var(--fk-font-family);
-    --fk-font-family-message: var(--fk-font-family);
-
-    --fk-font-weight: 400;
-    --fk-font-weight-input: var(--fk-font-weight);
-    --fk-font-weight-label: 700;
-    --fk-font-weight-legend: var(--fk-font-weight-label, bold);
-    --fk-font-weight-help: var(--fk-font-weight);
-    --fk-font-weight-option: var(--fk-font-weight);
-    --fk-font-weight-message: var(--fk-font-weight);
-
-    --fk-line-height: 1.1;
-    --fk-line-height-label: var(--fk-line-height);
-    --fk-line-height-help: var(--fk-line-height);
-    --fk-line-height-option: var(--fk-line-height);
-    --fk-line-height-message: var(--fk-line-height);
-    --fk-line-height-textarea: var(--fk-line-height);
-    --fk-line-height-input: 1.125em; /* Important to ensure equal height inputs. */
-    --fk-line-height-button: 1.3;
-
-    /* Structure */
-    --fk-max-width-input: 48em;
-    --fk-box-size: 0.875em;
-
-    /* Colors */
-    --fk-color-primary: var(--bms-main-100);
-    --fk-color-checked: var(--fk-color-primary);
-    --fk-color-input: var(--bms-font-color);
-    --fk-color-border: var(--bms-grey-50);
-    --fk-color-border-focus: var(--fk-color-primary);
-    --fk-color-border-shadow: var(--bms-main-10);
-    --fk-color-danger: var(--bms-red-100);
-    --fk-color-error: var(--fk-color-danger);
-    --fk-color-placeholder: var(--bms-grey-100);
-    --fk-color-disabled: var(--bms-disabled-color);
-    --fk-color-help: var(--bms-grey-100);
-    /* --fk-color-message: inherit; */
-    --fk-color-icon: var(--bms-grey-100);
-    --fk-color-icon-minor: var(--bms-grey-100);
-    --fk-color-button: #fff;
-    --fk-color-button-hover: #fff;
-    --fk-color-submit: var(--fk-color-button);
-    --fk-color-submit-hover: var(--fk-color-button-hover);
-    --fk-color-range-track: var(--fk-color-border);
-    --fk-color-range-thumb: var(--fk-color-primary);
-
-    --fk-bg-input: transparent;
-    --fk-bg-disabled: var(--bms-disabled-color);
-    --fk-bg-decorator: transparent;
-
-    --fk-bg-button: var(--fk-color-primary);
-    --fk-bg-button-hover: var(--fk-bg-button);
-    --fk-bg-submit: var(--fk-bg-button);
-    --fk-bg-submit-hover: var(--fk-bg-submit);
-
-    /* Borders */
-    --fk-border-width: 1px;
-    --fk-border-width-decorator: var(--fk-border-width);
-    --fk-border-width-focus: 1px;
-    --fk-border-width-checked: 1px;
-    --fk-border-width-decorator-checked: 1px;
-    --fk-border-width-decorator-focus: var(--fk-border-width-decorator-checked);
-    --fk-border-width-decorator-focus-visible: var(--fk-border-width-focus);
-    --fk-border-style: solid;
-    --fk-border: var(--fk-border-width) var(--fk-border-style)
-      var(--fk-color-border);
-    --fk-border-focus: var(--fk-border-width-focus) var(--fk-border-style)
-      var(--fk-color-border-focus);
-    --fk-border-decorator: var(--fk-border-width-decorator)
-      var(--fk-border-style) var(--fk-color-border);
-    --fk-border-decorator-focus: var(--fk-border-width-focus)
-      var(--fk-border-style) var(--fk-color-border-focus);
-    --fk-border-decorator-focus-visible: var(
-        --fk-border-width-decorator-focus-visible
-      )
-      var(--fk-border-style) var(--fk-color-border-focus);
-    --fk-border-decorator-checked: var(--fk-border-width-checked)
-      var(--fk-border-style) var(--fk-color-border-focus);
-    --fk-border-box-shadow: 0 0 0 var(--fk-border-width) var(--fk-color-border);
-    --fk-border-box-shadow-focus: 0 0 0 var(--fk-border-width-focus)
-        var(--fk-color-border-focus),
-      0 0 2px 2px var(--fk-color-border-shadow);
-    --fk-border-box-shadow-decorator: 0 0 0 var(--fk-border-width-decorator);
-    --fk-border-box-shadow-decorator-focus: 0 0 0
-      var(--fk-border-width-decorator-focus) var(--fk-color-border-focus);
-    --fk-border-box-shadow-decorator-focus-visible: 0 0 0
-      var(--fk-border-width-decorator-focus-visible)
-      var(--fk-color-border-focus);
-    --fk-border-box-shadow-decorator-checked: 0 0 0
-      var(--fk-border-width-decorator-checked) var(--fk-color-border-focus);
-    --fk-border-radius-tl: 4px;
-    --fk-border-radius-tr: 4px;
-    --fk-border-radius-bl: 4px;
-    --fk-border-radius-br: 4px;
-    --fk-border-radius: var(--fk-border-radius-tl, 4px)
-      var(--fk-border-radius-tr, 4px) var(--fk-border-radius-br, 4px)
-      var(--fk-border-radius-bl, 4px);
-    --fk-border-radius-full: 999em;
-
-    /* Padding */
-    --fk-padding-base: calc(0.25em - 1px / 3);
-
-    --fk-padding-input-x: calc(var(--fk-padding-base) * 3);
-    --fk-padding-input-y: calc(var(--fk-padding-base) * 3);
-    --fk-padding-input-t: var(--fk-padding-input-y, 0);
-    --fk-padding-input-r: var(--fk-padding-input-x, 0);
-    --fk-padding-input-b: var(--fk-padding-input-y, 0);
-    --fk-padding-input-l: var(--fk-padding-input-x, 0);
-    --fk-padding-input: var(--fk-padding-input-t) var(--fk-padding-input-r)
-      var(--fk-padding-input-b) var(--fk-padding-input-l);
-
-    --fk-padding-label-x: inherit;
-    --fk-padding-label-y: inherit;
-    --fk-padding-label-t: var(--fk-padding-label-y, 0);
-    --fk-padding-label-r: var(--fk-padding-label-x, 0);
-    --fk-padding-label-b: var(--fk-padding-label-y, 0.5em);
-    --fk-padding-label-l: var(--fk-padding-label-x, 0);
-    --fk-padding-label: var(--fk-padding-label-t) var(--fk-padding-label-r)
-      var(--fk-padding-label-b) var(--fk-padding-label-l);
-
-    --fk-padding-help-x: inherit;
-    --fk-padding-help-y: var(--fk-padding-base);
-    --fk-padding-help-t: var(--fk-padding-help-y, 0);
-    --fk-padding-help-r: var(--fk-padding-help-x, 0);
-    --fk-padding-help-b: var(--fk-padding-help-y, 0);
-    --fk-padding-help-l: var(--fk-padding-help-x, 0);
-    --fk-padding-help: var(--fk-padding-help-t) var(--fk-padding-help-r)
-      var(--fk-padding-help-b) var(--fk-padding-help-l);
-
-    --fk-padding-option-x: inherit;
-    --fk-padding-option-y: inherit;
-    --fk-padding-option-t: var(--fk-padding-option-y, 0);
-    --fk-padding-option-r: var(--fk-padding-option-x, 0);
-    --fk-padding-option-b: var(--fk-padding-option-y, 0);
-    --fk-padding-option-l: var(--fk-padding-option-x, 0);
-    --fk-padding-option: var(--fk-padding-option-t) var(--fk-padding-option-r)
-      var(--fk-padding-option-b) var(--fk-padding-option-l);
-
-    --fk-padding-messages-x: inherit;
-    --fk-padding-messages-y: inherit;
-    --fk-padding-messages-t: var(
-      --fk-padding-messages-y,
-      var(--fk-padding-base)
-    );
-    --fk-padding-messages-r: var(--fk-padding-messages-x, 0);
-    --fk-padding-messages-b: var(--fk-padding-messages-y, 0);
-    --fk-padding-messages-l: var(--fk-padding-messages-x, 0);
-    --fk-padding-messages: var(--fk-padding-messages-t)
-      var(--fk-padding-messages-r) var(--fk-padding-messages-b)
-      var(--fk-padding-messages-l);
-
-    --fk-padding-message-x: inherit;
-    --fk-padding-message-y: var(--fk-padding-base);
-    --fk-padding-message-t: var(--fk-padding-message-y, 0);
-    --fk-padding-message-r: var(--fk-padding-message-x, 0);
-    --fk-padding-message-b: var(--fk-padding-message-y, 0);
-    --fk-padding-message-l: var(--fk-padding-message-x, 0);
-    --fk-padding-message: var(--fk-padding-message-t)
-      var(--fk-padding-message-r) var(--fk-padding-message-b)
-      var(--fk-padding-message-l);
-
-    --fk-padding-legend-x: 0.25em;
-    --fk-padding-legend-y: 0.25em;
-    --fk-padding-legend-t: var(--fk-padding-legend-y);
-    --fk-padding-legend-r: var(--fk-padding-legend-x);
-    --fk-padding-legend-b: var(--fk-padding-legend-y);
-    --fk-padding-legend-l: var(--fk-padding-legend-x);
-    --fk-padding-legend: var(--fk-padding-legend-t) var(--fk-padding-legend-r)
-      var(--fk-padding-legend-b) var(--fk-padding-legend-l);
-
-    --fk-padding-fieldset-x: var(--fk-padding-input-x);
-    --fk-padding-fieldset-y: var(--fk-padding-input-y);
-    --fk-padding-fieldset-t: var(--fk-padding-fieldset-y);
-    --fk-padding-fieldset-r: var(--fk-padding-fieldset-x);
-    --fk-padding-fieldset-b: var(--fk-padding-fieldset-y);
-    --fk-padding-fieldset-l: var(--fk-padding-fieldset-x);
-    --fk-padding-fieldset: var(--fk-padding-fieldset-t)
-      var(--fk-padding-fieldset-r) var(--fk-padding-fieldset-b)
-      var(--fk-padding-fieldset-l);
-
-    --fk-padding-decorator-x: inherit;
-    --fk-padding-decorator-y: var(--fk-padding-base);
-    --fk-padding-decorator-t: var(--fk-padding-decorator-y, 1.25em);
-    --fk-padding-decorator-r: var(--fk-padding-decorator-x, 1.25em);
-    --fk-padding-decorator-b: var(--fk-padding-decorator-y, 1.25em);
-    --fk-padding-decorator-l: var(--fk-padding-decorator-x, 1.25em);
-    --fk-padding-decorator: var(--fk-padding-decorator-t)
-      var(--fk-padding-decorator-r) var(--fk-padding-decorator-b)
-      var(--fk-padding-decorator-l);
-
-    --fk-padding-button-x: calc(var(--fk-padding-base) * 8);
-    --fk-padding-button-y: calc(var(--fk-padding-base) * 3);
-    --fk-padding-button-t: var(--fk-padding-button-y);
-    --fk-padding-button-r: var(--fk-padding-button-x);
-    --fk-padding-button-b: var(--fk-padding-button-y);
-    --fk-padding-button-l: var(--fk-padding-button-x);
-    --fk-padding-button: var(--fk-padding-button-t) var(--fk-padding-button-r)
-      var(--fk-padding-button-b) var(--fk-padding-button-l);
-
-    /* Margin */
-    --fk-margin-base: 0.5em;
-
-    --fk-margin-outer-x: inherit;
-    --fk-margin-outer-y: inherit;
-    --fk-margin-outer-t: var(--fk-margin-outer-y, 0);
-    --fk-margin-outer-r: var(--fk-margin-outer-x, 0);
-    --fk-margin-outer-b: var(
-      --fk-margin-outer-y,
-      calc(var(--fk-margin-base) * 2)
-    );
-    --fk-margin-outer-l: var(--fk-margin-outer-x, 0);
-    --fk-margin-outer: var(--fk-margin-outer-t) var(--fk-margin-outer-r)
-      var(--fk-margin-outer-b) var(--fk-margin-outer-l);
-
-    --fk-margin-wrapper-x: inherit;
-    --fk-margin-wrapper-y: inherit;
-    --fk-margin-wrapper-t: var(--fk-margin-wrapper-y, 0);
-    --fk-margin-wrapper-r: var(--fk-margin-wrapper-x, 0);
-    --fk-margin-wrapper-b: var(--fk-margin-wrapper-y, 0);
-    --fk-margin-wrapper-l: var(--fk-margin-wrapper-x, 0);
-    --fk-margin-wrapper: var(--fk-margin-wrapper-t) var(--fk-margin-wrapper-r)
-      var(--fk-margin-wrapper-b) var(--fk-margin-wrapper-l);
-
-    --fk-margin-input-x: inherit;
-    --fk-margin-input-y: inherit;
-    --fk-margin-input-t: var(--fk-margin-input-y, 0);
-    --fk-margin-input-r: var(--fk-margin-input-x, 0);
-    --fk-margin-input-b: var(--fk-margin-input-y, 0);
-    --fk-margin-input-l: var(--fk-margin-input-x, 0);
-    --fk-margin-input: var(--fk-margin-input-t) var(--fk-margin-input-r)
-      var(--fk-margin-input-b) var(--fk-margin-input-l);
-
-    --fk-margin-label-x: inherit;
-    --fk-margin-label-y: 0;
-    --fk-margin-label-t: var(--fk-margin-label-y, 0);
-    --fk-margin-label-r: var(--fk-margin-label-x, 0);
-    --fk-margin-label-b: var(--fk-margin-label-y, var(--fk-margin-base));
-    --fk-margin-label-l: var(--fk-margin-label-x, 0);
-    --fk-margin-label: var(--fk-margin-label-t) var(--fk-margin-label-r)
-      var(--fk-margin-label-b) var(--fk-margin-label-l);
-
-    --fk-margin-help-x: inherit;
-    --fk-margin-help-y: 0.3em;
-    --fk-margin-help-t: var(--fk-margin-help-y, 0);
-    --fk-margin-help-r: var(--fk-margin-help-x, 0);
-    --fk-margin-help-b: 0;
-    --fk-margin-help-l: var(--fk-margin-help-x, 0);
-    --fk-margin-help: var(--fk-margin-help-t) var(--fk-margin-help-r)
-      var(--fk-margin-help-b) var(--fk-margin-help-l);
-
-    --fk-margin-option-x: inherit;
-    --fk-margin-option-y: inherit;
-    --fk-margin-option-t: var(--fk-margin-option-y, 0);
-    --fk-margin-option-r: var(--fk-margin-option-x, 0);
-    --fk-margin-option-b: var(--fk-margin-option-y, 0.625em);
-    --fk-margin-option-l: var(--fk-margin-option-x, 0);
-    --fk-margin-option: var(--fk-margin-option-t) var(--fk-margin-option-r)
-      var(--fk-margin-option-b) var(--fk-margin-option-l);
-
-    --fk-margin-message-x: inherit;
-    --fk-margin-message-y: inherit;
-    --fk-margin-message-t: var(--fk-margin-message-y, 0);
-    --fk-margin-message-r: var(--fk-margin-message-x, 0);
-    --fk-margin-message-b: var(--fk-margin-message-y, 0);
-    --fk-margin-message-l: var(--fk-margin-message-x, 0);
-    --fk-margin-message: var(--fk-margin-message-t) var(--fk-margin-message-r)
-      var(--fk-margin-message-b) var(--fk-margin-message-l);
-
-    --fk-margin-legend-x: 0em;
-    --fk-margin-legend-y: inherit;
-    --fk-margin-legend-t: var(--fk-margin-legend-y, 0);
-    --fk-margin-legend-r: var(--fk-margin-legend-x, 0);
-    --fk-margin-legend-b: var(--fk-margin-legend-y, 0);
-    --fk-margin-legend-l: var(--fk-margin-legend-x, 0);
-    --fk-margin-legend: var(--fk-margin-legend-t) var(--fk-margin-legend-r)
-      var(--fk-margin-legend-b) var(--fk-margin-legend-l);
-
-    --fk-margin-fieldset-x: inherit;
-    --fk-margin-fieldset-y: inherit;
-    --fk-margin-fieldset-t: var(--fk-margin-fieldset-y, 0);
-    --fk-margin-fieldset-r: var(--fk-margin-fieldset-x, 0);
-    --fk-margin-fieldset-b: var(--fk-margin-fieldset-y, 0);
-    --fk-margin-fieldset-l: var(--fk-margin-fieldset-x, 0);
-    --fk-margin-fieldset: var(--fk-margin-fieldset-t)
-      var(--fk-margin-fieldset-r) var(--fk-margin-fieldset-b)
-      var(--fk-margin-fieldset-l);
-
-    --fk-margin-decorator-x: inherit;
-    --fk-margin-decorator-y: inherit;
-    --fk-margin-decorator-t: var(--fk-margin-decorator-y, 0);
-    --fk-margin-decorator-r: var(--fk-margin-decorator-x, 0.5em);
-    --fk-margin-decorator-b: var(--fk-margin-decorator-y, 0);
-    --fk-margin-decorator-l: var(--fk-margin-decorator-x, 0);
-    --fk-margin-decorator: var(--fk-margin-decorator-t)
-      var(--fk-margin-decorator-r) var(--fk-margin-decorator-b)
-      var(--fk-margin-decorator-l);
-
-    --fk-margin-button-x: inherit;
-    --fk-margin-button-y: inherit;
-    --fk-margin-button-t: var(--fk-margin-button-y, 0);
-    --fk-margin-button-r: var(--fk-margin-button-x, 0.5em);
-    --fk-margin-button-b: var(--fk-margin-button-y, 0);
-    --fk-margin-button-l: var(--fk-margin-button-x, 0);
-    --fk-margin-button: var(--fk-margin-button-t) var(--fk-margin-button-r)
-      var(--fk-margin-button-b) var(--fk-margin-button-l);
-
-    /* default icons */
-    --fk-icon-close: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiPjwvbGluZT4KICA8bGluZSB4MT0iNiIgeTE9IjYiIHgyPSIxOCIgeTI9IjE4Ij48L2xpbmU +
-      Cjwvc3ZnPg==;
-    --fk-icon-down: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwb2x5bGluZSBwb2ludHM9IjYgOSAxMiAxNSAxOCA5Ij48L3BvbHlsaW5lPgo8L3N2Zz4=;
-    --fk-icon-fileDoc: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwYXRoIGQ9Ik0xNC41IDJINmEyIDIgMCAwIDAtMiAydjE2YTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlY3LjVMMTQuNSAyeiI +
-      PC9wYXRoPgogIDxwb2x5bGluZSBwb2ludHM9IjE0IDIgMTQgOCAyMCA4Ij48L3BvbHlsaW5lPgogIDxsaW5lIHgxPSIxNiIgeTE9IjEzIiB4Mj0iOCIgeTI9IjEzIj48L2xpbmU +
-      CiAgPGxpbmUgeDE9IjE2IiB5MT0iMTciIHgyPSI4IiB5Mj0iMTciPjwvbGluZT4KICA8bGluZSB4MT0iMTAiIHkxPSI5IiB4Mj0iOCIgeTI9IjkiPjwvbGluZT4KPC9zdmc +;
-    --fk-icon-check: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIj48L3BvbHlsaW5lPgo8L3N2Zz4=;
-    --fk-icon-circle: PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI +
-      PGNpcmNsZSBmaWxsPSJjdXJyZW50Q29sb3IiIGN4PSIxNiIgY3k9IjE2IiByPSIxNiIvPjwvc3ZnPg==;
-
-    /* icons by location name */
-    --fk-icon-fileItem: var(--fk-icon-fileDoc);
-    --fk-icon-fileRemove: var(--fk-icon-close);
-    --fk-icon-noFiles: var(--fk-icon-fileDoc);
-    --fk-icon-select: var(--fk-icon-down);
-    --fk-icon-checkboxDecorator: var(--fk-icon-check);
-    --fk-icon-radioDecorator: var(--fk-icon-circle);
-  }
-
-  [data-type='checkbox'] .formkit-input ~ .formkit-decorator .formkit-icon,
-  [data-type='radio'] .formkit-input ~ .formkit-decorator .formkit-icon {
-    padding: 2px;
-  }
-  [data-type='radio'] .formkit-input ~ .formkit-decorator .formkit-icon {
-    padding: 3px;
-  }
-
-  [data-invalid] .formkit-inner {
-    --fk-color-border-focus: var(--fk-color-danger);
-    --fk-color-border-shadow: var(--bms-red-10);
-
-    box-shadow: 0 0 0 var(--fk-border-width-focus) var(--fk-color-border-focus),
-      0 0 2px 2px var(--fk-color-border-shadow);
-  }
-}

package/src/components/form/Form.stories.js

@@ -1,35 +0,0 @@
-import template from '@/documentation/template_field_dependency.mdx';
-
-export default {
-  parameters: {
-    docs: {
-      page: template,
-    },
-  },
-  title: 'Composants/form/Formkit Exemple',
-};
-
-const Template = () => ({
-  template: `
-  <FormKit type="form" >
-  <FormKit
-    type="text"
-    label="Champ texte"
-    placeholder="Placeholder"
-  />
-  <FormKit
-    type="select"
-    label="Select"
-    :options="['titi', 'toto']"
-  />
-  <FormKit
-    type="select"
-    disabled
-    label="Select disabled"
-  />
-    </FormKit>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};

package/src/documentation/primaryButton.mdx

@@ -1,20 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
-import { Primary as BmsButton } from '../components/button/BmsButton.stories.js';
-
-<Meta title="Documentation/Buttons/Primary Button" />
-
-# <img src="./BmsIcon.png" /> Primary Button
-
-The primary button should represent the main action on a screen, there should only be one primary button on an interface, if multiple actions are possible then it is essential to create a hierarchy of actions and use a primary and several secondary or tertiary.
-
-![](./button/CoverPrimaryButton.png)
-
-## Anatomy
-
-Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
-
-![](./button/PrimaryButtonRepresentation.png)
-
-## Component
-
-<Canvas of={BmsButton} args={{ type: 'primary' }} />