RubyGems - primer_view_components - Versions diffs - 0.0.113 → 0.0.115 - Mend

primer_view_components 0.0.113 → 0.0.115

Files changed (147) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +44 -0
data/app/assets/javascripts/primer_view_components.js +1 -1
data/app/assets/javascripts/primer_view_components.js.map +1 -1
data/app/assets/styles/primer_view_components.css +2 -2
data/app/assets/styles/primer_view_components.css.map +1 -1
data/app/components/primer/alpha/action_list/divider.rb +2 -0
data/app/components/primer/alpha/action_list/heading.rb +2 -0
data/app/components/primer/alpha/action_list/item.rb +8 -6
data/app/components/primer/alpha/action_list.rb +1 -0
data/app/components/primer/alpha/auto_complete/auto_complete.html.erb +1 -1
data/app/components/primer/alpha/auto_complete/item.rb +1 -0
data/app/components/primer/alpha/auto_complete.rb +3 -2
data/app/components/primer/alpha/banner.html.erb +1 -1
data/app/components/primer/alpha/banner.rb +1 -0
data/app/components/primer/alpha/button_marketing.rb +2 -0
data/app/components/primer/alpha/dialog.rb +3 -0
data/app/components/primer/alpha/image.rb +1 -0
data/app/components/primer/alpha/image_crop.html.erb +1 -1
data/app/components/primer/alpha/layout.css +1 -0
data/app/components/primer/alpha/layout.css.json +1 -0
data/app/components/primer/alpha/layout.css.map +1 -0
data/app/components/primer/alpha/layout.pcss +268 -0
data/app/components/primer/{menu_component.css → alpha/menu.css} +0 -0
data/app/components/primer/alpha/menu.css.json +1 -0
data/app/components/primer/alpha/menu.css.map +1 -0
data/app/components/primer/{menu_component.html.erb → alpha/menu.html.erb} +0 -0
data/app/components/primer/{menu_component.pcss → alpha/menu.pcss} +0 -0
data/app/components/primer/alpha/menu.rb +76 -0
data/app/components/primer/{octicon_symbols_component.html.erb → alpha/octicon_symbols.html.erb} +0 -0
data/app/components/primer/alpha/octicon_symbols.rb +61 -0
data/app/components/primer/alpha/text_field.rb +1 -0
data/app/components/primer/alpha/toggle_switch.html.erb +2 -2
data/app/components/primer/alpha/toggle_switch.rb +2 -0
data/app/components/primer/alpha/tool_tip.js +77 -69
data/app/components/primer/alpha/tool_tip.ts +63 -51
data/app/components/primer/alpha/tooltip.rb +2 -0
data/app/components/primer/beta/auto_complete/item.rb +4 -4
data/app/components/primer/beta/auto_complete.rb +3 -3
data/app/components/primer/beta/avatar.rb +1 -0
data/app/components/primer/beta/base_button.rb +1 -0
data/app/components/primer/beta/blankslate.rb +5 -5
data/app/components/primer/beta/button.rb +7 -7
data/app/components/primer/beta/clipboard_copy.html.erb +2 -2
data/app/components/primer/beta/clipboard_copy.rb +1 -0
data/app/components/primer/beta/close_button.rb +2 -1
data/app/components/primer/beta/counter.rb +1 -0
data/app/components/primer/beta/heading.rb +1 -0
data/app/components/primer/beta/icon_button.html.erb +1 -1
data/app/components/primer/beta/icon_button.rb +1 -0
data/app/components/primer/beta/label.rb +1 -0
data/app/components/primer/beta/markdown.rb +291 -0
data/app/components/primer/{octicon_component.html.erb → beta/octicon.html.erb} +0 -0
data/app/components/primer/beta/octicon.rb +88 -0
data/app/components/primer/beta/relative_time.rb +2 -1
data/app/components/primer/{spinner_component.html.erb → beta/spinner.html.erb} +0 -0
data/app/components/primer/beta/spinner.rb +46 -0
data/app/components/primer/beta/text.rb +1 -0
data/app/components/primer/blankslate_component.rb +3 -3
data/app/components/primer/box.rb +1 -0
data/app/components/primer/button_component.rb +3 -3
data/app/components/primer/conditional_wrapper.rb +2 -0
data/app/components/primer/hellip_button.rb +2 -0
data/app/components/primer/icon_button.html.erb +2 -2
data/app/components/primer/icon_button.rb +1 -0
data/app/components/primer/layout_component.rb +2 -0
data/app/components/primer/local_time.rb +3 -0
data/app/components/primer/markdown.rb +2 -283
data/app/components/primer/menu_component.rb +2 -69
data/app/components/primer/navigation/tab_component.rb +2 -2
data/app/components/primer/octicon_component.rb +3 -81
data/app/components/primer/octicon_symbols_component.rb +2 -52
data/app/components/primer/primer.d.ts +2 -0
data/app/components/primer/primer.js +2 -0
data/app/components/primer/primer.pcss +2 -3
data/app/components/primer/primer.ts +2 -0
data/app/components/primer/spinner_component.rb +2 -38
data/app/components/primer/state_component.rb +1 -0
data/app/components/primer/subhead_component.rb +2 -0
data/app/components/primer/tab_container_component.rb +2 -0
data/app/components/primer/time_ago_component.rb +2 -1
data/app/components/primer/timeline_item_component.rb +3 -2
data/app/components/primer/tooltip.rb +1 -0
data/app/components/primer/truncate.rb +2 -0
data/app/forms/immediate_validation_form.rb +29 -0
data/app/forms/multi_input_form.rb +4 -2
data/app/lib/primer/css/layout.css +1 -378
data/app/lib/primer/css/layout.css.json +1 -1
data/app/lib/primer/octicon/cache.rb +1 -1
data/app/lib/primer/view_helper.rb +1 -1
data/lib/primer/deprecations.yml +30 -0
data/lib/primer/forms/builder.rb +48 -8
data/lib/primer/forms/check_box.html.erb +3 -1
data/lib/primer/forms/dsl/input.rb +23 -1
data/lib/primer/forms/dsl/multi_input.rb +6 -9
data/lib/primer/forms/dsl/select_list_input.rb +1 -1
data/lib/primer/forms/dsl/text_field_input.rb +31 -1
data/lib/primer/forms/form_control.html.erb +17 -13
data/lib/primer/forms/form_control.rb +2 -0
data/lib/primer/forms/multi.html.erb +6 -2
data/lib/primer/forms/primer_multi_input.d.ts +10 -0
data/lib/primer/forms/primer_multi_input.js +45 -0
data/lib/primer/forms/primer_multi_input.ts +46 -0
data/lib/primer/forms/primer_text_field.d.ts +1 -0
data/lib/primer/forms/primer_text_field.js +62 -0
data/lib/primer/forms/primer_text_field.ts +48 -0
data/lib/primer/forms/radio_button.html.erb +3 -1
data/lib/primer/forms/text_field.html.erb +8 -8
data/lib/primer/forms/text_field.rb +11 -0
data/lib/primer/view_components/linters/close_button_component_migration_counter.rb +1 -1
data/lib/primer/view_components/version.rb +1 -1
data/lib/tasks/docs.rake +6 -6
data/lib/tasks/helpers/ast_traverser.rb +1 -1
data/previews/primer/alpha/action_list_preview.rb +1 -1
data/previews/primer/alpha/auto_complete_preview.rb +62 -6
data/previews/primer/alpha/layout_preview.rb +179 -6
data/previews/primer/{menu_component_preview → alpha/menu_preview}/default.html.erb +3 -3
data/previews/primer/{menu_component_preview → alpha/menu_preview}/playground.html.erb +3 -3
data/previews/primer/alpha/menu_preview.rb +14 -0
data/previews/primer/alpha/toggle_switch_preview.rb +11 -9
data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +1 -1
data/previews/primer/beta/auto_complete_preview.rb +19 -17
data/previews/primer/{markdown_preview.rb → beta/markdown_preview.rb} +14 -12
data/previews/primer/beta/octicon_preview.rb +24 -0
data/previews/primer/beta/spinner_preview.rb +22 -0
data/previews/primer/forms/forms_preview/immediate_validation_form.html.erb +3 -0
data/previews/primer/forms/forms_preview/multi_input_form.html.erb +12 -1
data/previews/primer/forms/forms_preview.rb +2 -0
data/previews/primer/url_helpers.rb +15 -0
data/static/arguments.json +178 -178
data/static/audited_at.json +5 -0
data/static/constants.json +50 -40
data/static/statuses.json +12 -7
metadata +34 -24
data/app/components/primer/beta/button_group.css +0 -1
data/app/components/primer/beta/button_group.css.json +0 -1
data/app/components/primer/beta/button_group.css.map +0 -1
data/app/components/primer/beta/button_group.pcss +0 -92
data/app/components/primer/button_component.css +0 -1
data/app/components/primer/button_component.css.json +0 -1
data/app/components/primer/button_component.css.map +0 -1
data/app/components/primer/button_component.pcss +0 -557
data/app/components/primer/menu_component.css.json +0 -1
data/app/components/primer/menu_component.css.map +0 -1
data/previews/primer/menu_component_preview.rb +0 -12
data/previews/primer/octicon_component_preview.rb +0 -22
data/previews/primer/spinner_component_preview.rb +0 -20

data/app/components/primer/button_component.pcss DELETED Viewed

@@ -1,557 +0,0 @@
-/* btn */
-/* Base button styles */
-.btn {
-  position: relative;
-  display: inline-block;
-  padding: 5px var(--primer-control-medium-paddingInline-spacious, 16px);
-  font-size: var(--primer-text-body-size-medium, 14px);
-  font-weight: var(--base-text-weight-medium, 500);
-  line-height: 20px; /* Specifically not inherit our `<body>` default */
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  user-select: none;
-  border: var(--primer-borderWidth-thin, 1px) solid;
-  border-radius: var(--primer-borderRadius-medium, 6px);
-  appearance: none; /* Corrects inability to style clickable `input` types in iOS. */
-  &:hover {
-    text-decoration: none;
-  }
-  &:disabled,
-  &.disabled,
-  &[aria-disabled='true'] {
-    cursor: default;
-  }
-  & i {
-    font-style: normal;
-    font-weight: var(--base-text-weight-medium, 500);
-    opacity: 0.75;
-  }
-  & .octicon {
-    margin-right: var(--primer-control-small-gap, 4px);
-    color: var(--color-fg-muted);
-    vertical-align: text-bottom;
-    &:only-child {
-      margin-right: 0;
-    }
-  }
-  & .Counter {
-    margin-left: 2px;
-    color: inherit;
-    text-shadow: none;
-    vertical-align: top;
-    background-color: var(--color-btn-counter-bg);
-  }
-  & .dropdown-caret {
-    margin-left: var(--primer-control-small-gap, 4px);
-    opacity: 0.8;
-  }
-  /* Default button */
-  color: var(--color-btn-text);
-  background-color: var(--color-btn-bg);
-  border-color: var(--color-btn-border);
-  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
-  transition-property: color, background-color, box-shadow, border-color;
-  &:hover,
-  &.hover,
-  & [open] > & {
-    background-color: var(--color-btn-hover-bg);
-    border-color: var(--color-btn-hover-border);
-    transition-duration: 0.1s;
-  }
-  &:active {
-    background-color: var(--color-btn-active-bg);
-    border-color: var(--color-btn-active-border);
-    transition: none;
-  }
-  &.selected,
-  &[aria-selected='true'] {
-    background-color: var(--color-btn-selected-bg);
-    box-shadow: var(--color-primer-shadow-inset);
-  }
-  &.disabled,
-  &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-btn-bg);
-    border-color: var(--color-btn-border);
-    & .octicon {
-      color: var(--color-primer-fg-disabled);
-    }
-  }
-}
-/* Primary button */
-.btn-primary {
-  color: var(--color-btn-primary-text);
-  background-color: var(--color-btn-primary-bg);
-  border-color: var(--color-btn-primary-border);
-  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
-  &:hover,
-  &.hover,
-  & [open] > & {
-    background-color: var(--color-btn-primary-hover-bg);
-    border-color: var(--color-btn-primary-hover-border);
-  }
-  /* fallback :focus state */
-  &:focus {
-    @mixin focusOutlineOnEmphasis;
-    /* remove fallback :focus if :focus-visible is supported */
-    &:not(:focus-visible) {
-      outline: solid 1px transparent;
-      box-shadow: none;
-    }
-  }
-  /* default focus state */
-  &:focus-visible {
-    @mixin focusOutlineOnEmphasis;
-  }
-  &:active,
-  &.selected,
-  &[aria-selected='true'] {
-    background-color: var(--color-btn-primary-selected-bg);
-    box-shadow: var(--color-btn-primary-selected-shadow);
-  }
-  &:disabled,
-  &.disabled,
-  &[aria-disabled='true'] {
-    color: var(--color-btn-primary-disabled-text);
-    background-color: var(--color-btn-primary-disabled-bg);
-    border-color: var(--color-btn-primary-disabled-border);
-    & .octicon {
-      color: var(--color-btn-primary-disabled-text);
-    }
-  }
-  & .Counter {
-    color: inherit;
-    background-color: var(--color-btn-primary-counter-bg);
-  }
-  & .octicon {
-    color: var(--color-btn-primary-icon);
-  }
-}
-/* ensure links styled as button primary gets proper focus style */
-a.btn-primary {
-  /* fallback :focus state */
-  &:focus {
-    @mixin focusOutlineOnEmphasis;
-    /* remove fallback :focus if :focus-visible is supported */
-    &:not(:focus-visible) {
-      outline: solid 1px transparent;
-      box-shadow: none;
-    }
-  }
-  /* default focus state */
-  &:focus-visible {
-    @mixin focusOutlineOnEmphasis;
-  }
-}
-/* Outline button */
-.btn-outline {
-  color: var(--color-btn-outline-text);
-  &:hover,
-  & [open] > & {
-    color: var(--color-btn-outline-hover-text);
-    background-color: var(--color-btn-outline-hover-bg);
-    border-color: var(--color-btn-outline-hover-border);
-    box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
-    & .Counter {
-      background-color: var(--color-btn-outline-hover-counter-bg);
-    }
-    & .octicon {
-      color: inherit;
-    }
-  }
-  &:active,
-  &.selected,
-  &[aria-selected='true'] {
-    color: var(--color-btn-outline-selected-text);
-    background-color: var(--color-btn-outline-selected-bg);
-    border-color: var(--color-btn-outline-selected-border);
-    box-shadow: var(--color-btn-outline-selected-shadow);
-    /* fallback :focus state */
-    &:focus {
-      @mixin focusOutlineOnEmphasis;
-      /* remove fallback :focus if :focus-visible is supported */
-      &:not(:focus-visible) {
-        outline: solid 1px transparent;
-        box-shadow: none;
-      }
-    }
-    /* default focus state */
-    &:focus-visible {
-      @mixin focusOutlineOnEmphasis;
-    }
-  }
-  &:disabled,
-  &.disabled,
-  &[aria-disabled='true'] {
-    color: var(--color-btn-outline-disabled-text);
-    background-color: var(--color-btn-outline-disabled-bg);
-    border-color: var(--color-btn-border);
-    box-shadow: none;
-    & .Counter {
-      background-color: var(--color-btn-outline-disabled-counter-bg);
-    }
-  }
-  & .Counter {
-    color: inherit;
-    background-color: var(--color-btn-outline-counter-bg);
-  }
-}
-/* Danger button */
-.btn-danger {
-  color: var(--color-btn-danger-text);
-  & .octicon {
-    color: var(--color-btn-danger-icon);
-  }
-  &:hover,
-  & [open] > & {
-    color: var(--color-btn-danger-hover-text);
-    background-color: var(--color-btn-danger-hover-bg);
-    border-color: var(--color-btn-danger-hover-border);
-    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
-    & .Counter {
-      background-color: var(--color-btn-danger-hover-counter-bg);
-    }
-    & .octicon {
-      color: var(--color-btn-danger-hover-icon);
-    }
-  }
-  &:active,
-  &.selected,
-  &[aria-selected='true'] {
-    color: var(--color-btn-danger-selected-text);
-    background-color: var(--color-btn-danger-selected-bg);
-    border-color: var(--color-btn-danger-selected-border);
-    box-shadow: var(--color-btn-danger-selected-shadow);
-  }
-  &:disabled,
-  &.disabled,
-  &[aria-disabled='true'] {
-    color: var(--color-btn-danger-disabled-text);
-    background-color: var(--color-btn-danger-disabled-bg);
-    border-color: var(--color-btn-border);
-    box-shadow: none;
-    & .Counter {
-      background-color: var(--color-btn-danger-disabled-counter-bg);
-    }
-    & .octicon {
-      color: var(--color-btn-danger-disabled-text);
-    }
-  }
-  & .Counter {
-    color: inherit;
-    background-color: var(--color-btn-danger-counter-bg);
-  }
-}
-/* Sizes
-**
-** Tweak `line-height` to make them smaller. */
-.btn-sm {
-  padding: 3px 12px;
-  font-size: var(--primer-text-body-size-small, 12px);
-  line-height: 20px;
-  & .octicon {
-    vertical-align: text-top;
-  }
-}
-/* Large button adds more padding around text. Use font-size utils to increase font-size..
-** e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p> */
-.btn-large {
-  padding: 0.75em 1.5em;
-  font-size: inherit;
-  line-height: 1.5;
-  border-radius: 0.5em;
-}
-/* Full-width button
-**
-** These buttons expand to the full width of their parent container */
-.btn-block {
-  display: block;
-  width: 100%;
-  text-align: center;
-}
-/* Link-like buttons
-**
-** This class is for styling <button> and <input> elements to look like links */
-.btn-link {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  color: var(--color-accent-fg);
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  appearance: none; /* Corrects inability to style clickable `input` types in iOS. */
-  &:hover {
-    text-decoration: underline;
-  }
-  &:disabled,
-  &[aria-disabled='true'] {
-    &,
-    &:hover {
-      color: var(--color-primer-fg-disabled);
-      cursor: default;
-    }
-  }
-  &:not(.dropdown-item) {
-    &:focus,
-    &:focus-visible {
-      border-radius: var(--primer-borderRadius-medium, 6px);
-      outline-offset: 0;
-    }
-  }
-}
-/* Invisible button
-**
-** Typically used as a "cancel" button next to a .btn */
-.btn-invisible {
-  color: var(--color-accent-fg);
-  background-color: transparent; /* Reset default gradient backgrounds and colors */
-  border: 0;
-  border-radius: var(--primer-borderRadius-medium, 6px);
-  box-shadow: none;
-  &:hover,
-  &.zeroclipboard-is-hover {
-    color: var(--color-accent-fg);
-    background-color: var(--color-btn-hover-bg);
-    outline: none;
-    box-shadow: none;
-  }
-  &:active,
-  &.selected,
-  &[aria-selected='true'],
-  &.zeroclipboard-is-active {
-    color: var(--color-accent-fg);
-    background: none;
-    border-color: var(--color-btn-active-border);
-    @mixin focusOutline;
-  }
-  &:active &.zeroclipboard-is-active {
-    background-color: var(--color-btn-selected-bg);
-  }
-  &:disabled,
-  &.disabled,
-  &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
-    background-color: transparent;
-  }
-}
-/* Octicon button
-**
-** Icon-only buttons */
-.btn-octicon {
-  display: inline-block;
-  padding: 5px;
-  margin-left: 5px;
-  line-height: 1;
-  color: var(--color-fg-muted);
-  vertical-align: middle;
-  /* For `<button>` elements */
-  background: transparent;
-  border: 0;
-  box-shadow: none;
-  &:hover {
-    color: var(--color-accent-fg);
-  }
-  &:focus,
-  &:focus-visible {
-    border-radius: var(--primer-borderRadius-medium, 6px);
-  }
-  &.disabled,
-  &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
-    cursor: default;
-    &:hover {
-      color: var(--color-primer-fg-disabled);
-    }
-  }
-}
-.btn-octicon-danger:hover {
-  color: var(--color-danger-fg);
-}
-/* Close button
-**
-** Typically used with an octicon-x */
-.close-button {
-  padding: 0;
-  color: var(--color-fg-muted);
-  background: transparent;
-  border: 0;
-  &:hover {
-    color: var(--color-fg-default);
-  }
-  &:active {
-    @mixin focusOutline;
-  }
-}
-/* Hidden text button
-**
-** Use `.hidden-text-expander` to indicate and expand hidden text. */
-.hidden-text-expander {
-  display: block;
-  &.inline {
-    position: relative;
-    top: -1px;
-    display: inline-block;
-    margin-left: 5px;
-    line-height: 0;
-  }
-}
-.hidden-text-expander a,
-.ellipsis-expander {
-  display: inline-block;
-  height: 12px;
-  padding: 0 5px 5px;
-  font-size: var(--primer-text-body-size-small, 12px);
-  font-weight: var(--base-text-weight-semibold, 600);
-  line-height: 6px;
-  color: var(--color-fg-default);
-  text-decoration: none;
-  vertical-align: middle;
-  background: var(--color-neutral-muted);
-  border: 0;
-  border-radius: 1px;
-  &:hover {
-    text-decoration: none;
-    background-color: var(--color-accent-muted);
-  }
-  &:active {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-accent-emphasis);
-  }
-}
-/* Social button count
-** TODO: Deprecate? Use BtnGroup instead? */
-.btn-with-count {
-  float: left;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  &:focus {
-    z-index: 1;
-  }
-}
-/* Social count bubble
-**
-** A container that is used for social bubbles counts. */
-.social-count {
-  position: relative;
-  float: left;
-  padding: 3px 12px;
-  font-size: var(--primer-text-body-size-small, 12px);
-  font-weight: var(--base-text-weight-semibold, 600);
-  line-height: 20px;
-  color: var(--color-fg-default);
-  vertical-align: middle;
-  background-color: var(--color-canvas-default);
-  border: var(--primer-borderWidth-thin, 1px) solid var(--color-btn-border);
-  border-left: 0;
-  border-top-right-radius: var(--primer-borderRadius-medium, 6px);
-  border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
-  box-shadow: var(--color-shadow-small), var(--color-primer-shadow-highlight);
-  &:hover,
-  &:active {
-    text-decoration: none;
-  }
-  &:hover {
-    color: var(--color-accent-fg);
-    cursor: pointer;
-  }
-}

data/app/components/primer/menu_component.css.json DELETED Viewed

@@ -1 +0,0 @@

- {"name":"menu_component","selectors":[".menu",".menu-item",".menu-item:first-child",".menu-item:first-child:before",".menu-item:last-child",".menu-item:last-child:before",".menu-item:hover",".menu-item:active",".menu-item.selected",".menu-item[aria-current]:not([aria-current=false])",".menu-item[aria-selected=true]",":is(.menu-item.selected",".menu-item[aria-current]:not([aria-current=false])):before",".menu-item .octicon",".menu-item .Counter",".menu-item .menu-warning",".menu-item .avatar",".menu-item.alert .Counter",".menu-heading",".menu-heading:hover",".menu-heading:first-child",".menu-heading:last-child"]}

data/app/components/primer/menu_component.css.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["menu_component.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,2EAA6E,CAC7E,mDAAqD,CAHrD,eAAgB,CADhB,iDAKF,CAEA,WAKE,gFAAkF,CADlF,6BAA8B,CAF9B,aAAc,CACd,yHAA4H,CAF5H,iBA+EF,CAzEE,uBACE,YAAa,CAEb,6DAKF,CAHE,qDAHA,4DAKA,CAGF,sBACE,eAAgB,CAChB,gEAMF,CAHE,mDAFA,+DAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,kHAOE,kDAAmD,CAJnD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,2BAA4B,CAD5B,iDAAmD,CAEnD,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,+CACF,CAEA,yBAEE,+BAAgC,CADhC,WAEF,CAEA,mBACE,UAAW,CACX,gDACF,CAGE,0BACE,4BACF,CAIJ,cAQE,gFAAkF,CADlF,6BAA8B,CAN9B,aAAc,CAId,iBAAkB,CAClB,gDAAkD,CAFlD,eAAgB,CADhB,YAAa,CADb,yHAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,4DAA8D,CAC9D,6DACF,CAEA,yBACE,eAAgB,CAEhB,+DAAiE,CADjE,gEAEF","file":"menu_component.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n margin-bottom: var(--primer-stack-gap-normal, 16px);\n list-style: none;\n background-color: var(--color-canvas-default);\n border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.menu-item {\n position: relative;\n display: block;\n padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n color: var(--color-fg-default);\n border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n &:first-child {\n border-top: 0;\n border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n\n &::before {\n border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n }\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n\n &::before {\n border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n }\n }\n\n &:hover {\n text-decoration: none;\n background-color: var(--color-neutral-subtle);\n }\n\n &:active {\n background-color: var(--color-canvas-subtle);\n }\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n cursor: default;\n background-color: var(--color-menu-bg-active);\n\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 2px;\n content: '';\n background-color: var(--color-primer-border-active);\n }\n }\n\n & .octicon {\n width: 16px;\n margin-right: var(--primer-control-medium-gap, 8px);\n color: var(--color-fg-muted);\n text-align: center;\n }\n\n & .Counter {\n float: right;\n margin-left: var(--primer-control-small-gap, 4px);\n }\n\n & .menu-warning {\n float: right;\n color: var(--color-attention-fg);\n }\n\n & .avatar {\n float: left;\n margin-right: var(--primer-control-small-gap, 4px);\n }\n\n &.alert {\n & .Counter {\n color: var(--color-danger-fg);\n }\n }\n}\n\n.menu-heading {\n display: block;\n padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n margin-top: 0;\n margin-bottom: 0;\n font-size: inherit;\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-default);\n border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n\n &:hover {\n text-decoration: none;\n }\n\n &:first-child {\n border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n }\n}\n"]}

data/previews/primer/menu_component_preview.rb DELETED Viewed

@@ -1,12 +0,0 @@
-# frozen_string_literal: true
-module Primer
-  # @label MenuComponent
-  class MenuComponentPreview < ViewComponent::Preview
-    # @label Playground
-    def playground; end
-    # @label Default
-    def default; end
-  end
-end

data/previews/primer/octicon_component_preview.rb DELETED Viewed

@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-module Primer
-  # @label OcticonComponent
-  class OcticonComponentPreview < ViewComponent::Preview
-    # @label Playground
-    #
-    # @param aria_label [String]
-    # @param size [Symbol] select [xsmall, small, medium]
-    def playground(size: :small, aria_label: nil)
-      render(Primer::OcticonComponent.new(icon: :people, size: size, "aria-label": aria_label))
-    end
-    # @label Default Options
-    #
-    # @param aria_label [String]
-    # @param size [Symbol] select [xsmall, small, medium]
-    def default(size: :small, aria_label: nil)
-      render(Primer::OcticonComponent.new(icon: :people, size: size, "aria-label": aria_label))
-    end
-  end
-end

data/previews/primer/spinner_component_preview.rb DELETED Viewed

@@ -1,20 +0,0 @@
-# frozen_string_literal: true
-module Primer
-  # @label SpinnerComponent
-  class SpinnerComponentPreview < ViewComponent::Preview
-    # @label Playground
-    #
-    # @param size [Symbol] select [small, medium, large]
-    def playground(size: :medium)
-      render(Primer::SpinnerComponent.new(size: size))
-    end
-    # @label Default Options
-    #
-    # @param size [Symbol] select [small, medium, large]
-    def default(size: :medium)
-      render(Primer::SpinnerComponent.new(size: size))
-    end
-  end
-end