@oiz/stzh-components 1.5.0-alpha → 2.0.0-beta

package/dist/collection/components/stzh-servicecard/stzh-servicecard.css

@@ -1,558 +0,0 @@
-/**
- * Colors
- */
-/*
- * Base
- */
-/**
- * Link
- */
-/**
- * Text
- */
-/**
- * Richtext
- */
-/**
- * Section
- */
-/**
- * Header
- */
-/**
- * Appnav
- */
-/**
- * Progressbar
- */
-/**
- * Loader
- */
-/**
- * Table
- */
-/**
- * Heading
- */
-/**
- * Menu (Item)
- */
-/**
- * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
- */
-/**
- * Popover
- */
-/**
- * Tooltips
- */
-/**
- * Accordions
- */
-/**
- * Buttons
- */
-/**
- * Box Shadows
- */
-/**
- * Z-Indexes
- * Inspired by https://www.duetds.com/tokens/#z-index
- */
-/**
- * Icon sizes
- */
-/**
- * Grid
- */
-/**
- * Breakpoints
- */
-/**
- * Container
- */
-/**
- * Spaces
- */
-/**
- * Fonts
- */
-:host {
-  font-family: var(--stzh-font-family-regular);
-  font-weight: var(--stzh-font-weight-regular);
-  font-style: normal;
-  color: var(--stzh-base-color);
-  box-sizing: border-box;
-  display: block;
-}
-:host[hidden] {
-  display: none;
-}
-:host *,
-:host *::before,
-:host *::after {
-  box-sizing: border-box;
-}
-
-:host {
-  --box-shadow: var(--stzh-box-shadow-popover);
-  --border: 0.0625rem solid var(--stzh-base-border-color);
-  --border-radius: 0.1875rem;
-  --dnd-visibility: hidden;
-  --dnd-opacity: 0;
-  position: relative;
-  border-radius: var(--border-radius);
-}
-:host.is-ghost::after, .is-ghost :host::after {
-  border-radius: var(--border-radius);
-}
-:host.is-selected, :host.is-chosen, .is-selected :host, .is-chosen :host {
-  --box-shadow: var(--stzh-box-shadow-overlay);
-}
-:host.is-ghost, .is-ghost :host {
-  --box-shadow: none;
-  --border: 0.0625rem solid transparent;
-  overflow: hidden;
-}
-:host.is-drag, :host.is-chosen, :host.is-ghost, :host.is-selected, .is-drag :host, .is-chosen :host, .is-ghost :host, .is-selected :host {
-  --dnd-visibility: visible;
-  --dnd-opacity: 1;
-}
-:host ::slotted(*) {
-  font-size: var(--stzh-font-milli-font-size);
-  line-height: var(--stzh-font-milli-text-line-height);
-  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
-}
-:host ::slotted(table) {
-  border: 0;
-  border-spacing: 0;
-}
-:host ::slotted(table) th {
-  font-family: var(--stzh-font-family-regular);
-  font-weight: var(--stzh-font-weight-regular);
-  font-style: normal;
-}
-:host ::slotted(table) td, :host ::slotted(table) th {
-  padding: 0;
-}
-:host ::slotted(table) td {
-  color: var(--stzh-color-black);
-  padding-left: var(--stzh-space-xsmall);
-}
-:host ::slotted(*:not(:first-child)) {
-  margin-top: var(--stzh-space-medium);
-}
-
-.stzh-servicecard {
-  background-color: var(--stzh-color-white);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow);
-  border: var(--border);
-  transition: box-shadow var(--stzh-base-transition-animation-speed);
-  /* Has Middle Part */
-  /* Columns variant where middle column moves to the right top instead of the right top (default) */
-  /* Columns variant where middle column moves to the left bottom instead of the right top */
-  /* Interactive Subtitle */
-  /* Type Alert */
-  /* Collapsed (Header) */
-  /* Starred */
-}
-@media screen and (max-width: 1023px) {
-  .stzh-servicecard .show-medium {
-    display: none;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard .hide-medium {
-    display: none;
-  }
-}
-.stzh-servicecard__dnd {
-  --size: var(--stzh-icon-size-xsmall);
-  position: absolute;
-  left: 0.1875rem;
-  top: 1.4375rem;
-  display: flex;
-  visibility: var(--dnd-visibility);
-  opacity: var(--dnd-opacity);
-  transition: all var(--stzh-base-transition-animation-speed);
-  display: none;
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__dnd {
-    display: block;
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-servicecard__dnd {
-    left: 0.25rem;
-    top: 1.6875rem;
-  }
-}
-.stzh-servicecard__header {
-  padding-top: var(--stzh-space-xsmall);
-  padding-bottom: var(--stzh-space-xsmall);
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
-}
-@media screen and (min-width: 600px) {
-  .stzh-servicecard__header {
-    padding-top: var(--stzh-space-small);
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__header {
-    padding-top: var(--stzh-space-medium);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-servicecard__header {
-    padding-top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 600px) {
-  .stzh-servicecard__header {
-    padding-bottom: var(--stzh-space-small);
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__header {
-    padding-bottom: var(--stzh-space-medium);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-servicecard__header {
-    padding-bottom: var(--stzh-space-large);
-  }
-}
-.stzh-servicecard__header-left, .stzh-servicecard__header-right {
-  display: flex;
-}
-.stzh-servicecard__header-right {
-  padding-left: var(--stzh-space-xsmall);
-}
-@media screen and (min-width: 600px) {
-  .stzh-servicecard__header-right {
-    padding-left: var(--stzh-space-small);
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__header-right {
-    padding-left: var(--stzh-space-medium);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-servicecard__header-right {
-    padding-left: var(--stzh-space-large);
-  }
-}
-.stzh-servicecard__header, .stzh-servicecard__columns {
-  padding-left: var(--stzh-space-medium);
-  padding-right: var(--stzh-space-medium);
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__header, .stzh-servicecard__columns {
-    padding-left: var(--stzh-space-large);
-    padding-right: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-servicecard__header, .stzh-servicecard__columns {
-    padding-left: var(--stzh-space-xlarge);
-    padding-right: var(--stzh-space-xlarge);
-  }
-}
-.stzh-servicecard__left {
-  align-self: center;
-}
-.stzh-servicecard__title-area {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-  -webkit-hyphens: auto;
-          hyphens: auto;
-  overflow: hidden;
-}
-.stzh-servicecard__title, .stzh-servicecard__subtitle {
-  margin: 0;
-}
-.stzh-servicecard__title {
-  font-family: var(--stzh-font-family-heavy);
-  font-weight: var(--stzh-font-weight-heavy);
-  font-style: normal;
-  font-size: var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));
-  line-height: var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));
-  letter-spacing: var(--stzh-font-curve-h3-default-heading-letter-spacing);
-  color: var(--stzh-base-lead-color);
-}
-@media screen and (min-width: 600px) {
-  .stzh-servicecard__title {
-    font-size: var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));
-    line-height: var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));
-    letter-spacing: var(--stzh-font-curve-h3-small-heading-letter-spacing);
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__title {
-    font-size: var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));
-    line-height: var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));
-    letter-spacing: var(--stzh-font-curve-h3-medium-heading-letter-spacing);
-  }
-}
-.stzh-servicecard__subtitle {
-  font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
-  line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
-  letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  text-decoration: none;
-  margin-left: -0.5625em;
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__subtitle {
-    font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
-    line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
-    letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
-  }
-}
-.stzh-servicecard__subtitle-text {
-  position: relative;
-  display: inline-flex;
-  padding-left: 0.5625em;
-}
-.stzh-servicecard__subtitle-text::after {
-  content: ",";
-  position: absolute;
-  left: 0;
-}
-.stzh-servicecard__columns {
-  margin-top: var(--stzh-space-medium);
-  margin-bottom: var(--stzh-space-medium);
-  display: flex;
-  flex-direction: column;
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__columns {
-    margin-top: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-servicecard__columns {
-    margin-top: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__columns {
-    margin-bottom: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-servicecard__columns {
-    margin-bottom: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 800px) {
-  .stzh-servicecard__columns {
-    display: grid;
-    grid-template-columns: 50% 50%;
-    grid-template-rows: auto auto;
-    margin-left: calc(var(--stzh-space-medium) / -1);
-    margin-right: calc(var(--stzh-space-medium) / -1);
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__columns {
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: auto;
-    margin-left: calc(var(--stzh-space-large) / -1);
-    margin-right: calc(var(--stzh-space-large) / -1);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-servicecard__columns {
-    margin-left: calc(var(--stzh-space-xlarge) / -1);
-    margin-right: calc(var(--stzh-space-xlarge) / -1);
-  }
-}
-@media screen and (min-width: 800px) {
-  .stzh-servicecard__column {
-    padding-left: var(--stzh-space-medium);
-    padding-right: var(--stzh-space-medium);
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__column {
-    padding-left: var(--stzh-space-large);
-    padding-right: var(--stzh-space-large);
-  }
-}
-@media screen and (min-width: 1260px) {
-  .stzh-servicecard__column {
-    padding-left: var(--stzh-space-xlarge);
-    padding-right: var(--stzh-space-xlarge);
-  }
-}
-@media screen and (min-width: 800px) {
-  .stzh-servicecard__column.is-left {
-    grid-column: 1/span 1;
-    grid-row: 1/span 2;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__column.is-left {
-    grid-column: 1/span 2;
-    grid-row: 1/span 1;
-  }
-}
-@media screen and (min-width: 800px) {
-  .stzh-servicecard__column.is-middle {
-    grid-column: 2/span 1;
-    grid-row: 1/span 1;
-  }
-}
-@media screen and (min-width: 800px) {
-  .stzh-servicecard__column.is-right {
-    align-self: end;
-    grid-column: 2/span 1;
-    grid-row: 2/span 1;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__column.is-right {
-    grid-column: 3/span 1;
-    grid-row: 1/span 1;
-  }
-}
-.stzh-servicecard__column:not(:empty):not(:first-child):not(.has-no-spacing) {
-  margin-top: var(--stzh-space-medium);
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard__column:not(:empty):not(:first-child):not(.has-no-spacing) {
-    margin-top: 0;
-  }
-}
-@media screen and (min-width: 800px) {
-  .stzh-servicecard__column.is-middle:empty + .stzh-servicecard__column.is-right {
-    margin-top: 0;
-  }
-}
-.stzh-servicecard__column.is-left:empty + .stzh-servicecard__column.is-middle:not(:empty), .stzh-servicecard__column.is-left:empty + .stzh-servicecard__column.is-middle:empty + .stzh-servicecard__column.is-right:not(:empty) {
-  margin-top: 0;
-}
-.stzh-servicecard__card-actions {
-  display: inline-flex;
-  white-space: nowrap;
-}
-@media screen and (max-width: 1023px) {
-  .stzh-servicecard__card-action {
-    --icon-text-margin: 0;
-    --badge-icon-text-margin: 0;
-  }
-}
-.stzh-servicecard__card-action[variant=tertiary] {
-  --color: var(--stzh-color-grey70);
-}
-.stzh-servicecard__card-action.is-button {
-  --icon-size: var(--stzh-icon-size-small);
-}
-.stzh-servicecard__card-action.is-placeholder {
-  width: var(--stzh-space-xxlarge);
-  height: var(--stzh-space-xxlarge);
-}
-.stzh-servicecard__card-action-popover {
-  --width: auto;
-}
-@media screen and (min-width: 800px) {
-  .stzh-servicecard--has-middle .stzh-servicecard__column.is-left {
-    grid-column: 1/span 1;
-    grid-row: 1/span 2;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard--has-middle .stzh-servicecard__column.is-left {
-    grid-column: 1/span 1;
-    grid-row: 1/span 1;
-  }
-}
-@media screen and (min-width: 800px) {
-  .stzh-servicecard--middle-to-right .stzh-servicecard__column.is-middle {
-    margin-top: 0;
-  }
-}
-@media screen and (min-width: 800px) {
-  .stzh-servicecard--middle-to-left .stzh-servicecard__column.is-left {
-    grid-column: 1/span 1;
-    grid-row: 1/span 1;
-  }
-}
-@media screen and (min-width: 800px) {
-  .stzh-servicecard--middle-to-left .stzh-servicecard__column.is-right {
-    grid-column: 2/span 1;
-    grid-row: 1/span 2;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard--middle-to-left .stzh-servicecard__column.is-right {
-    grid-column: 3/span 1;
-    grid-row: 1/span 1;
-  }
-}
-@media screen and (min-width: 800px) {
-  .stzh-servicecard--middle-to-left .stzh-servicecard__column.is-middle {
-    grid-column: 1/span 1;
-    grid-row: 2/span 1;
-  }
-}
-@media screen and (min-width: 1024px) {
-  .stzh-servicecard--middle-to-left .stzh-servicecard__column.is-middle {
-    grid-column: 2/span 1;
-    grid-row: 1/span 1;
-  }
-}
-@media screen and (min-width: 800px) {
-  .stzh-servicecard--middle-to-left .stzh-servicecard__column.is-right {
-    margin-top: 0;
-  }
-}
-.stzh-servicecard--has-subtitle-interactive .stzh-servicecard__subtitle {
-  cursor: pointer;
-  padding: 0;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: none;
-  border: none;
-  transition: color var(--stzh-base-transition-animation-speed);
-  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-}
-.stzh-servicecard--has-subtitle-interactive .stzh-servicecard__subtitle:hover, .stzh-servicecard--has-subtitle-interactive .stzh-servicecard__subtitle:focus {
-  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-}
-.stzh-servicecard--type-alert .stzh-servicecard__subtitle {
-  color: var(--stzh-color-error);
-}
-.stzh-servicecard--type-alert .stzh-servicecard__subtitle:hover, .stzh-servicecard--type-alert .stzh-servicecard__subtitle:focus {
-  color: var(--stzh-color-error);
-}
-.stzh-servicecard--is-collapsed .hide-when-collapsed, .stzh-servicecard--has-collapsed-header .stzh-servicecard__header .hide-when-collapsed {
-  display: none;
-}
-.stzh-servicecard--is-collapsed .show-when-collapsed, .stzh-servicecard--has-collapsed-header .stzh-servicecard__header .show-when-collapsed {
-  display: block;
-}
-.stzh-servicecard--is-collapsed .stzh-servicecard__header {
-  border-bottom: none;
-}
-.stzh-servicecard--is-collapsed .stzh-servicecard__card-action, .stzh-servicecard--has-collapsed-header .stzh-servicecard__card-action {
-  --icon-text-margin: 0;
-  --badge-icon-text-margin: 0;
-}
-.stzh-servicecard--is-starred .stzh-servicecard__card-action.is-star {
-  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-}
-.stzh-servicecard--is-starred .stzh-servicecard__card-action.is-star:hover, .stzh-servicecard--is-starred .stzh-servicecard__card-action.is-star:focus {
-  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-}

package/dist/collection/components/stzh-servicecard/stzh-servicecard.stories.js

@@ -1,73 +0,0 @@
-import { h } from '../../utils/h';
-import readme from './readme.md';
-import { withDesign } from 'storybook-addon-designs';
-import { getFigmaLink } from '../../../figma';
-
-export default {
-  title: 'Components/Servicecard',
-  component: 'stzh-servicecard',
-  parameters: {
-    actions: {
-      handles: ['stzhCollapse', 'stzhStarClick', 'stzhSubtitleClick', 'stzhActionClick']
-    },
-    layout: 'padded',
-    docs: {
-      description: {
-        component: readme
-      }
-    },
-    design: {
-      type: 'figma',
-      url: getFigmaLink('servicecard'),
-      allowFullscreen: true
-    }
-  },
-  decorators: [
-    withDesign
-  ]
-};
-
-const Template = (args) => (
-  <stzh-servicecard {...args}>
-    <div slot="left">Content Left</div>
-    <div slot="right">Content Right</div>
-  </stzh-servicecard>
-);
-
-const TemplateThreeColumn = (args) => (
-  <stzh-servicecard {...args}>
-    <div slot="left">Content Left</div>
-    <div slot="middle">Content Middle</div>
-    <div slot="right">Content Right</div>
-  </stzh-servicecard>
-);
-
-const actions = `[
-  {
-    "id": "delete",
-    "icon": "delete",
-    "label": "Action"
-  },
-  {
-    "id": "message",
-    "onlyCollapseText": true,
-    "icon": "mail",
-    "badge": "3",
-    "label": "Messages"
-  }
-]`;
-
-export const TwoColumn = Template.bind({});
-TwoColumn.args = {
-  heading: "Lorem ipsum",
-  subtitle: "Dolor si",
-  actions
-};
-
-export const ThreeColumn = TemplateThreeColumn.bind({});
-ThreeColumn.args = {
-  heading: "Lorem ipsum",
-  subtitle: "Dolor si",
-  actions
-};
-